<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="当前/最近直播" name="first" >
        直播提出的问题次数：{{problemInfos.length}}
        <div class="problem_info">

          <el-collapse v-model="activeNames">

            <el-collapse-item
              class="problem-collapse-item"
              :title="problemInfo.title"
              :name="problemInfo.title"
              v-for="(problemInfo, index) in problemInfos"
              :key="index"
            >
              <div class="problem_info_show">

                <div class="problem_info_desc_show">
                  <div>
                    <span class="problem_label">问题类型：</span>选择题
                  </div>

                  <div class="problem_info_item">
                    <span class="problem_label">发出时间：</span>{{ problemInfo.problem.createTime }}
                  </div>

                  <div class="problem_desc_info">
                    <!-- <div class="problem_info_item"> -->
                    <div class="problem_info_item">
                      <span class="problem_label">问题描述：</span>
                      <div v-html="problemInfo.problem.content">

                      </div>
                    </div>

                    <div class="problem_info_item">
                       <!-- <span class="problem_label">：</span> -->
                      <div
                        class="problem_info_check_item">
                        <div>
                            
                          <div
                            v-for="(check, index) in problemInfo.problem.checks"
                            :key="index">

                            <div>
                              {{ check.label }} : {{ check.content }}
                            </div>
                            <!-- <div v-else>
                              {{ check.check_ops }} : {{ check.check_info }}
                            </div> -->

                          </div>

                        </div>
                      </div>
                    </div>

                    <!-- </div> -->
                  </div>

                </div>

                <div class="problem_info_chart_show">
                  提交人数饼状比例图
                  <ve-pie :data="problemInfo.chartData" :settings="chartSettings"></ve-pie>
                </div>

              </div>


              <el-select v-model="classNameValue" placeholder="请选择筛选班级">
                <el-option
                  v-for="classInfo in myClassInfos"
                  :key="classInfo.classId"
                  :label="classInfo.className"
                  :value="classInfo.classId">
                </el-option>
              </el-select>
              <el-radio style="margin-left:3%" v-model="searchFilter" label="1" border>已提交</el-radio>
              <el-radio style="margin-left:-2%" v-model="searchFilter" label="2" border>未提交</el-radio>


              <div class="problem_stu_record">


                      <el-table
                        :data="problemInfo.problemDetails"
                        height="500"
                        style="width: 100%">
                        <el-table-column
                            prop="pdReplyTime"
                            label="日期"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="stuNumber"
                            label="学号"
                            width="180">
                        </el-table-column>

                        <el-table-column
                            prop="pdStuName"
                            label="姓名"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="className"
                            label="班级"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="pdReply"
                            label="选项">
                        </el-table-column>
                      </el-table>

              </div>

            </el-collapse-item>

          </el-collapse>

        </div>

      </el-tab-pane>
      <el-tab-pane label="所有直播记录" name="second" disabled>所有直播记录1</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getProblemRecords } from '../../api/live';
export default {
  data() {
    return {
      searchFilter: "1",
      activeName: "first",
      activeNames: [],
      problemInfos: [
        // {
        //   title: "问题1",
        //   type: 0, //0是选择题，1是文本题
        //   // successCheck:"", //如果是选择题的话有正确选项。
        //   desc: "Java 是一种编译类型的语言吗？",
        //   craeteTime: "2021-04-10 10:00:00",
        //   checks: [
        //     //选择题类型专属
        //     {
        //       check_ops: "A",
        //       check_info: "是",
        //       is_Success: true,
        //     },
        //     {
        //       check_ops: "B",
        //       check_info: "不是",
        //       is_Success: false,
        //     },
            
        //   ],
        //   stuInfo:[
        //       {
        //           "stuName":"胡一涵",
        //           "stuId": "541713140206",
        //           "className": "3G软件1702",
        //           "check":"A",
        //           "is_success": true,
        //           "submitTime": "2021-04-10 10:02:00",
        //       },

        //   ],
        //   chartData: {
        //     columns: ['班级', '提交人数'],
        //       rows: [
        //         { '班级': '3G软件1701', '提交人数': 1 },
        //         { '班级': '3G软件1702', '提交人数': 1 },
        //         { '班级': '未提交', "提交人数": 1}
        //       ]
        //   },
        // },
      ],
      myClassInfos: [
        {
          classId: 1,
          className: "3G软件1702"
        },
        {
          classId: 2,
          className: "3G软件1701"
        },
      ],
      classNameValue:"",
      chartSettings: {
        limitShowNum: 2
      }
    };
  },
  methods: {
    filterTag(value, row) {
      return row.is_success === value;
    },
    getRecord() {
      getProblemRecords().then(res => {
        if (res.code == 200) {
          this.problemInfos = res.data.records
          let index = 1;
          this.problemInfos.forEach(record => {
            record.title = "问题" + index;
            index++
            this.activeNames.push(record.title)
            let json = JSON.parse(record.problem.problemInfo)
            record.problem.content = json.content
            record.problem.checks = json.checkInfos
            let chartData = {
              columns: ['班级', '提交人数'],
              rows: [
                // { '班级': '3G软件1701', '提交人数': 0 },
                // { '班级': '3G软件1702', '提交人数': 1 },
                // { '班级': '未提交', "提交人数": 1}
              ]
          }
            let realNumber = 0
            record.classInfos.forEach(classInfo => {
              chartData.rows.push(
                { '班级': classInfo.className, '提交人数': classInfo.problemNumber }
              )
                realNumber += classInfo.problemNumber
            })
            console.log(chartData)
            chartData.rows.push({ '班级': '未提交', "提交人数": (record.totalNumber - realNumber) })
            record.chartData = chartData

          } )
        }
      })
    }
  },
  mounted() {
    this.getRecord()
  }
};
</script>

<style>
.problem_info {
  margin-top: 3%;
}

.problem_info_item {
  margin-top: 1%;
}

.problem_label {
  color: #99a9bf;
  width: 80px;
}

.problem_desc_info {
  min-height: 100px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.problem_info_check_item {
  display: flex;
  flex-direction: column;
}

.check_true {
  color: #67c23a;
}

.problem_info_show {
  display: flex;
  justify-content: space-between;
}

.problem_info_desc_show {
  margin-top: 1%;
  min-width: 500px;
}

.problem_info_chart_show {
  /* background-color: tomato; */
  min-width: 400px;
  height: 294px;
  text-align: center;
  margin-bottom: 10px;
  /* height: 400px; */
}


</style>